import 'dart:ui';

import 'package:flutter/material.dart';

const double _stationWH = 10;
const double _dottedLineWH = 3;
const double _dottedVerMargin = 8;
const double _dottedHorMargin = 10;

/// 虚线
class DottedLinePage extends StatelessWidget {
  const DottedLinePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('虚线')),
      backgroundColor: const Color(0xfff3f3f3),
      body: Container(
        alignment: Alignment.center,
        child: RepaintBoundary(
          child: CustomPaint(
            painter: DottedLinePainter(),
            child: SizedBox(
              width: 300,
              height: 90,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  /// 始末站点圆点
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        margin: const EdgeInsets.only(left: _stationWH * 0.5),
                        child: const StationDotted(
                          bgColor: Color(0xff00B386),
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: _stationWH * 0.5),
                        child: const StationDotted(
                          bgColor: Color(0xfff56200),
                        ),
                      ),
                    ],
                  ),

                  /// 始末站站点名称
                  Container(
                    margin: const EdgeInsets.only(left: 17),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        /// 起始站点
                        Container(
                          transform: Matrix4.translationValues(0, -_stationWH * 0.5, 0),
                          child: const Text(
                            '火车南站',
                            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                          ),
                        ),

                        /// z站点、分钟数
                        const Text(
                          '15个站点，约35分钟',
                          style: TextStyle(fontSize: 12, color: Color(0xff787878)),
                        ),

                        /// 终点站点
                        Container(
                          transform: Matrix4.translationValues(0, _stationWH * 0.5, 0),
                          child: const Text(
                            '淮安实验小学',
                            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// 始末站圆点
class StationDotted extends StatelessWidget {
  final Color bgColor;

  const StationDotted({
    Key? key,
    required this.bgColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _stationWH,
      height: _stationWH,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(_stationWH * 0.5),
        color: bgColor,
      ),
    );
  }
}

/// 虚线
class DottedLinePainter extends CustomPainter {
  final bgPaint = Paint()..color = Colors.white.withOpacity(0.75);
  final pointPaint = Paint()
    ..color = const Color(0xffcccccc)
    ..strokeCap = StrokeCap.round
    ..strokeWidth = _dottedLineWH;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Offset.zero & size, bgPaint);

    double initYValue = _dottedLineWH * 0.5 + _stationWH + _dottedVerMargin * 0.5;

    List<Offset> offsets = [Offset(_dottedHorMargin, initYValue)];

    int number = ((size.height - _stationWH * 2) / _dottedVerMargin).round();

    for (var i = 1; i < number; i++) {
      offsets.add(Offset(_dottedHorMargin, initYValue + i * _dottedVerMargin));
    }

    canvas.drawPoints(PointMode.points, offsets, pointPaint);
  }

  @override
  bool shouldRepaint(covariant DottedLinePainter oldDelegate) {
    return false;
  }
}
